<template>
  <div class="login">
    <Card class="login-card">
      <div slot="header" class="clearfix login-title">亲爱的用户 欢迎您回来 </div>
      <Form :model="ruleForm" :rules="rules" ref="ruleForm">
        <FormItem prop="userName">
          <Input type="text" size="small" name="userName" id="userName" v-model="ruleForm.userName" :placeholder="ruleForm.p_userName" prefix-icon="el-icon-info" />
        </FormItem>
        <FormItem prop="userPass">
          <Input type="password" size="small" name="userPass" id="userPass" v-model="ruleForm.userPass" :placeholder="ruleForm.p_userPass" prefix-icon="el-icon-goods" />
        </FormItem>
        <Button size="small" type="primary" class="login-btn" @click="submitForm('ruleForm')">登录</Button>
      </Form>
    </Card>
  </div>
</template>

<script>
import axios from 'axios'
import axiosGetToken from '../../api/login'
import { Form, Card, FormItem, Button, Input } from 'element-ui'
export default {
  name: 'login',
  components: {
    Card,
    Form,
    FormItem,
    Button,
    Input
  },
  data() {
    return {
      ruleForm: {
        p_userName: '用户名/手机号/电子邮箱',
        p_userPass: '用户密码',
        userName: '',
        userPass: ''
      },
      rules: {
        userName: { required: true, message: '请输入用户名', trigger: 'blur' },
        userPass: { required: true, message: '请输入密码', trigger: 'blur' }
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let name = this.ruleForm.userName
          let pass = this.ruleForm.userPass
          let router = this.$router
          let route = this.$route
          axiosGetToken(name, pass, router, route)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="postcss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url(https://file.iviewui.com/admin-dist/img/login-bg.0899ffa6.jpg);
  background-size: cover;
  background-position: 50%;
  position: relative;
}
.login-card {
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  width: 300px;
  position: absolute;
  top: 30%;
  right: 260px;
  background: rgba(255, 255, 255, 0.7);
  border-color: #d2d2d2;
}
.login-title {
  text-align: center;
}
.login-btn {
  width: 100%;
}
</style>


